<template>
  <div class="learning-data-analysis">
    <!-- 标题区域 -->
    <div class="header-container">
      <h2 class="main-title">用户学习计划</h2>
       <div class="title-line"></div> 
    </div>
    
    <!-- 查询区域 -->
    <el-card class="filter-card">
      <div class="filter-bar">
        <div class="search-section">
          <div class="user-search">
            <el-input 
              v-model="username" 
              placeholder="请输入用户名" 
              clearable
              style="width: 300px">
              <template #prepend>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
            <el-button 
              type="primary" 
              class="custom-primary-button"
              @click="fetchTasksByUsername">
              查询
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    
    <!-- 所有任务列表 -->
    <el-card class="wrong-questions-card">
      <div class="overview-header">
        <div class="header-gradient"></div>
        <h3>今日任务列表</h3>
      </div>
      
      <div class="wrong-questions-list">
        <el-table :data="allTasks" style="width: 100%">
          <el-table-column prop="taskDate" label="任务日期" width="150">
            <template #default="scope">
              {{ formatDate(scope.row.taskDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="statusTagType(scope.row.status)" effect="dark">
                {{ statusToChinese(scope.row.status) }}  <!-- 修改这里 -->
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="任务内容" />
        </el-table>
        
        <div v-if="allTasks.length === 0" class="no-data">
          <el-icon><DocumentDelete /></el-icon>
          <p>暂无今日任务</p>
        </div>
      </div>
    </el-card>
    
    <!-- 未完成任务列表 -->
    <el-card class="wrong-questions-card">
      <div class="overview-header">
        <div class="header-gradient"></div>
        <h3>今日未完成任务列表</h3>
      </div>
      
      <div class="wrong-questions-list">
        <el-table :data="pendingTasks" style="width: 100%">
          <el-table-column prop="taskDate" label="任务日期" width="150">
            <template #default="scope">
              {{ formatDate(scope.row.taskDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="content" label="任务内容" />
        </el-table>
        
        <div v-if="pendingTasks.length === 0" class="no-data">
          <el-icon><CircleCheck /></el-icon>
          <p>恭喜，今日任务已完成！</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { User, DocumentDelete, CircleCheck } from '@element-plus/icons-vue'

export default {
  name: 'UserLearningPlan',
  components: {
    User,
    DocumentDelete,
    CircleCheck
  },
  data() {
    return {
      username: '',       // 查询的用户名
      allTasks: [],       // 所有任务
      pendingTasks: []    // 未完成任务
    }
  },
  methods: {
    // 根据用户名查询任务
    async fetchTasksByUsername() {
      if (!this.username) {
        ElMessage.warning('请输入用户名')
        return
      }
      
      try {
        const response = await axios.get(`/dailyTasks/user/${this.username}`)
        const allTasks = response.data
        
         // === 修复1：使用本地日期进行过滤 ===
        const today = new Date();
        // 获取本地时区的日期字符串 (格式: YYYY-MM-DD)
        const todayStr = today.toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        }).replace(/\//g, '-');
        
        // 使用本地时区比较
        this.allTasks = allTasks.filter(task => {
          const taskDate = new Date(task.taskDate);
          const taskDateStr = taskDate.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          }).replace(/\//g, '-');
          return taskDateStr === todayStr;
        });
        
        // 过滤出今天的未完成任务
        this.pendingTasks = this.allTasks.filter(task => 
          task.status === 'pending' || task.status === 'skipped'
        )
        
        if (this.allTasks.length === 0) {
          ElMessage.info('该用户没有今日任务')
        } else {
          ElMessage.success(`成功加载 ${this.allTasks.length} 条今日任务`)
        }
      } catch (error) {
        console.error('获取任务列表失败:', error)
        ElMessage.error('获取任务列表失败，请检查用户名是否正确')
      }
    },
    
    // 格式化日期 - 修复时区问题
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).replace(/\//g, '-');
    },
    
    // 状态标签类型
    statusTagType(status) {
      switch (status) {
        case 'completed': return 'success'
        case 'pending': return 'warning'
        case 'skipped': return 'danger'
        default: return 'info'
      }
    },
    
    // 新增：将状态转换为中文显示
    statusToChinese(status) {
      switch (status) {
        case 'pending': return '未完成';
        case 'completed': return '已完成';
        case 'skipped': return '已跳过';
        default: return status;
      }
    }
  }
}
</script>

<style scoped>
/* 在style部分添加下划线样式 */
.title-line {
  width: 50px;
  height: 4px;
  background: linear-gradient(90deg, #3b527a, #4e6694);
  border-radius: 2px;
  margin-bottom: 15px;
}
/* 整体布局 */
.learning-data-analysis {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header-container {
  position: relative;
  margin-bottom: 30px;
}

.main-title {
  color: #1a2f54;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 10px;
}

.title-line {
  width: 50px;
  height: 4px;
  background: linear-gradient(90deg, #3b527a, #4e6694);
  border-radius: 2px;
}

/* 卡片通用样式 */
.filter-card, .wrong-questions-card {
  border-radius: 10px;
  margin-bottom: 24px;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.filter-card {
  padding: 20px;
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.search-section {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.user-search {
  display: flex;
  gap: 12px;
  align-items: center;
}

.custom-primary-button {
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 100%);
  border: none;
  color: white;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(26, 47, 84, 0.3);
}

.custom-primary-button:hover {
  background: linear-gradient(135deg, #3b527a 0%, #4e6694 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(26, 47, 84, 0.4);
}

/* 任务列表卡片 */
.wrong-questions-card {
  padding: 0;
}

.overview-header {
  position: relative;
  padding: 16px 20px;
  margin-bottom: 15px;
}

.overview-header h3 {
  color: white;
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.header-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 100%);
  z-index: 1;
}

.wrong-questions-list {
  padding: 15px;
}

.no-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.no-data .el-icon {
  font-size: 60px;
  color: #e6e9ed;
}

/* 表格样式增强 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table :deep(.el-table__header) th {
  background-color: #f0f5ff;
  color: #4e6694;
  font-weight: 600;
}

.el-table :deep(.el-table__row) {
  transition: all 0.3s;
}

.el-table :deep(.el-table__row:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  background-color: #f8f9fa;
}

.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

/* 标签样式增强 */
.el-tag {
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .user-search {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .wrong-questions-card {
    overflow-x: auto;
  }
  
  .el-table {
    min-width: 600px;
  }
}
</style>